/*
 *
 * @User: winter
 * @Date: 2019/10/10
 * @Time: 9:55 上午
 *
 */
@font-face {
  font-family: 'iconfont';  /* project id 1441026 */
  src: url('//at.alicdn.com/t/font_1441026_rper26eh6r.eot');
  src: url('//at.alicdn.com/t/font_1441026_rper26eh6r.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1441026_rper26eh6r.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1441026_rper26eh6r.woff') format('woff'),
  url('//at.alicdn.com/t/font_1441026_rper26eh6r.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1441026_rper26eh6r.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: top;
}

#app {
  .container {
    padding-bottom: .24rem;

    .header {
      width: 100%;
      height: .44rem;
      padding: .09rem .15rem;

      .header-logo {
        width: 1.04rem;
        height: .26rem;
        background-image: url("../img/logo@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .exhibition {
      height: .72rem;
      padding-top: .3rem;
      padding-bottom: .2rem;
      text-align: center;
      background-color: transparent;

      span {
        display: inline-block;
        vertical-align: top;
        font-size: .16rem;
        font-weight: 500;
        color: var(--color-text-three-title);
        line-height: .22rem;
        position: relative;
        margin-right: .05rem;
      }

      span:after {
        content: "";
        width: .05rem;
        height: .05rem;
        border-radius: 50%;
        background-color: #121212;
        position: absolute;
        bottom: .04rem;
        right: -.1rem;
      }
    }

    .division {
      width: 100%;
      height: .1rem;
      background: rgba(245, 245, 245, 1);
    }

    .banner {
      width: 3.75rem;
      height: 1.60rem;
      background-color: white;

      .swiper-container {
        .swiper-wrapper {
          .swiper-slide-1 {
            width: 3.75rem;
            height: 1.6rem;
            background-image: url("../img/bioplatform/banner-1@3x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .button {
            position: absolute;
            left: 0;
            bottom: .19rem;
            width: 100%;
            height: .2rem;
            text-align: center;

            button {
              cursor: pointer;
              vertical-align: top;
              width: .6rem;
              height: 100%;
              outline: none;
              background-color: transparent;
              border-radius: initial;
              border: 0;
            }
          }
        }
      }
    }

    .case_box {
      padding-left: .15rem;
      padding-right: .15rem;
      padding-bottom: .5rem;

      .case {
        position: relative;

        .item {
          padding-left: .14rem;
          padding-right: .14rem;

          .img {
            width: 3.04rem;
            height: 1.76rem;

            img {
              width: 100%;
              height: 100%;
              border: 0;
            }
          }
        }

        .shadow {
          position: absolute;
          left: 0;
          bottom: -0.19rem;
          width: 100%;
          height: 0.37rem;
          background: rgba(203, 203, 203, .8);
          filter: blur(.11rem);
          z-index: -1;
        }
      }
    }

    .advantage_box {
      .advantage {
        padding-bottom: .3rem;

        .items {
          padding-left: .15rem;
          padding-right: .15rem;
          display: flex;
          display: -webkit-flex;
          flex-wrap: wrap;

          .item {
            flex: 0 0 50%;
            height: 1.24rem;
            padding-left: .1rem;
            padding-top: .16rem;
            padding-right: .14rem;

            .icon {
              width: 100%;
              height: .24rem;
              color: var(--color-text-three-title);

              .icon-1, .icon-4 {
                font-size: .22rem;
              }

              .icon-2, .icon-6 {
                font-size: .19rem;
              }

              .icon-3, .icon-5 {
                font-size: .20rem;
              }
            }

            .title {
              width: 100%;
              height: .2rem;
              color: var(--color-text-three-title);
              font-size: .14rem;
              font-family: PingFangSC-Medium, PingFangSC;
              font-weight: 500;
              line-height: .2rem;
            }

            .info {
              padding-top: .02rem;
              font-size: .12rem;
              font-family: PingFangSC-Regular, PingFangSC;
              font-weight: 400;
              color: var(--color-text-base);
              line-height: .15rem;
            }
          }

          .active {
            .icon, .title, .info {
              color: white;
            }
          }

          .item.active[data-id='1'] {
            background-image: url("../img/bioplatform/bg-1@3x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .item.active[data-id='2'] {
            background-image: url("../img/bioplatform/bg-2@3x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .item.active[data-id='3'] {
            background-image: url("../img/bioplatform/bg-3@3x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .item.active[data-id='4'] {
            background-image: url("../img/bioplatform/bg-4@3x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .item.active[data-id='5'] {
            background-image: url("../img/bioplatform/bg-5@3x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .item.active[data-id='6'] {
            background-image: url("../img/bioplatform/bg-6@3x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        .button {
          width: 100%;
          height: .58rem;
          padding-top: .3rem;
          text-align: center;

          button {
            vertical-align: top;
            width: .79rem;
            height: .28rem;
            background-color: #5E5E5E;
            border-radius: .04rem;
            color: white;
            font-size: .14rem;
            font-family: PingFangSC-Regular, PingFangSC;
            font-weight: 400;
            line-height: .2rem;
            outline: none;
          }
        }
      }
    }

    .host_service_box {
      .host_service {
        display: flex;
        display: -webkit-flex; /* Safari */

        .left {
          width: 2.14rem;
          height: 2.11rem;
          background-image: url("../img/bioplatform/pic-1@3x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .right {
          flex-grow: 1;

          .items {
            height: 100%;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;


            .item {
              width: 1.30rem;
              height: .26rem;
              border-radius: .02rem;
              font-size: .12rem;
              text-align: center;
              line-height: .26rem;
              border: 1px solid var(--color-text-base);
            }

            .active {
              background-color: #5E5E5E;
              border: 1px solid #5E5E5E;
              color: white;
            }
          }
        }
      }

      .more {
        padding-top: .2rem;
        padding-bottom: .3rem;
        padding-right: .16rem;
        font-size: .12rem;
        font-weight: 400;
        color: #5E5E5E;
        text-align: right;
        background: -webkit-linear-gradient(to bottom, #F5F5F5 0%, white 100%); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to bottom, #F5F5F5 0%, white 100%); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to bottom, #F5F5F5 0%, white 100%); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom, #F5F5F5 0%, white 100%);
      }
    }

    .information_box {
      width: 3.75rem;
      height: 1.63rem;
      background-image: url("../img/download/banner-2@3x.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        padding-top: .2rem;
        padding-bottom: .07rem;
        width: 100%;
        font-size: .18rem;
        font-weight: 500;
        color: white;
        line-height: .28rem;
        text-align: center;
      }

      .remarks {
        height: .17rem;
        font-size: .12rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: .17rem;
        text-align: center;
      }

      .button {
        width: 100%;
        height: .26rem;
        text-align: center;
        margin-top: .17rem;

        span {
          padding: .05rem .13rem;
          display: inline-block;
          vertical-align: top;
          border-radius: .13rem;
          border: .01rem solid white;
          font-size: .12rem;
          font-weight: 400;
          color: white;
          line-height: .18rem;
        }
      }
    }

    .applications_box {
      padding-right: 0;

      .applications_swiper {
        .swiper-container {
          overflow: initial;

          .applications_swiper_in_container {
            overflow: hidden;

            .swiper-wrapper {
              .more {
                .applications_swiper_item {
                  .img {
                    text-align: center;
                    position: relative;

                    img {
                      width: .38rem;
                      height: .38rem;
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      display: inline-block;
                      vertical-align: top;
                    }
                  }

                  .info {
                    text-align: center;
                  }
                }
              }

              .applications_swiper_item {
                width: 1.1rem;
                height: 1.09rem;
                border-radius: .04rem;
                border: .01rem solid rgba(229, 229, 229, 1);
                overflow: hidden;
                margin: 0 auto;

                .img {
                  width: 100%;
                  height: .83rem;

                  img {
                    display: block;
                    width: 100%;
                    height: 100%;
                  }
                }

                .info {
                  height: .17rem;
                  font-size: .12rem;
                  font-weight: 500;
                  color: var(--color-text-one-title);
                  line-height: .17rem;
                  padding-left: .08rem;
                  padding-top: .04rem;
                }
              }
            }

            .swiper-pagination {
              bottom: -.3rem;

              .swiper-pagination-bullet {
                width: .08rem;
                height: .08rem;
                background: none;
                border: .01rem solid var(--color-text-one-title);
              }

              .swiper-pagination-bullet-active {
                background: var(--color-text-one-title);
              }
            }
          }
        }
      }
    }

    .partner_box {
      padding-top: .1rem;

      .partner {
        padding-bottom: .3rem;
        margin-top: -.16rem;

        &_msg {
          display: flex;
          display: -webkit-flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
        }

        &-1, &-2, &-3, &-4, &-5, &-6, &-7, &-8 {
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-top: .2rem;
        }

        &-1 {
          width: .33rem;
          height: .19rem;
          background-image: url("../img/life/partner-1@3x.png");
          margin-right: .23rem;
        }

        &-2 {
          width: .66rem;
          height: .19rem;
          background-image: url("../img/life/partner-2@3x.png");
          margin-right: .24rem;
        }


        &-3 {
          width: .99rem;
          height: .16rem;
          background-image: url("../img/life/partner-3@3x.png");
          margin-right: .23rem;
        }


        &-4 {
          width: .76rem;
          height: .17rem;
          background-image: url("../img/life/partner-4@3x.png");
        }

        &-5 {
          width: .62rem;
          height: .17rem;
          background-image: url("../img/life/partner-5@3x.png");
          margin-right: .26rem;
        }

        &-6 {
          width: .66rem;
          height: .15rem;
          background-image: url("../img/life/partner-6@3x.png");
          margin-right: .26rem;
        }

        &-7 {
          width: .79rem;
          height: .14rem;
          background-image: url("../img/life/partner-7@3x.png");
          margin-right: .26rem;
        }

        &-8 {
          width: .76rem;
          height: .16rem;
          background-image: url("../img/life/partner-8@3x.png");
        }
      }

    }

    .copyright_box {
      height: .14rem;
      font-size: .1rem;
      font-weight: 500;
      color: rgba(80, 80, 80, 1);
      line-height: .14rem;
      text-align: center;
      a {
        color: rgba(80, 80, 80, 1);
      }
    }

    .popup_box {
      .modals {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        z-index: 1000;
        overflow: auto;
        background-color: rgba(0, 0, 0, .59);

        .modal {
          width: 100vw;
          height: 100vh;
          position: relative;

          &-dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            &-top {
              .close_box {
                .close {

                }
              }
            }
          }
        }
      }
    }

    #white_book {
      .modal {
        &-dialog {
          width: 3rem;
        }

        &-top {
          width: 100%;
          height: 1.78rem;
          background-image: url("../img/life/from-bg-eml@3x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;

          .close {
            &_box {
              padding: .1rem .12rem;
              overflow: hidden;

              .close {
                width: .2rem;
                height: .2rem;
                background-image: url("../img/life/ic-close@3x.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                float: right;
              }
            }
          }

          .msg {
            font-size: .24rem;
            font-weight: 500;
            color: white;
            line-height: .42rem;
            padding-left: .32rem;
          }
        }

        &-middle {
          width: 100%;
          height: 2.2rem;
          background-color: white;

          .title {
            font-size: .16rem;
            font-family: PingFangSC-Regular, PingFangSC;
            font-weight: 400;
            color: var(--color-text-one-title);
            line-height: .16rem;
            padding-top: .23rem;
            padding-left: .16rem;
            padding-bottom: .12rem;
          }

          .input {
            height: .6rem;
            padding-bottom: .26rem;
            padding-left: .16rem;
            position: relative;

            img {
              width: .16rem;
              height: .22rem;
              position: absolute;
              top: .07rem;
              left: .27rem;
            }

            input {
              width: 2.55rem;
              height: .36rem;
              line-height: .36rem;
              font-size: .14rem;
              background-color: white;
              padding-left: .38rem;
              box-shadow: 0 .02rem .07rem 0 rgba(106, 106, 106, 0.5);
              -webkit-box-shadow: 0 .02rem .07rem 0 rgba(106, 106, 106, 0.5);
              -moz-box-shadow: 0 .02rem .07rem 0 rgba(106, 106, 106, 0.5);
              border: .01rem solid var(--color-text-one-title);
              vertical-align: top;
            }

            input::placeholder {
              font-size: .14rem;
            }

            input::-webkit-input-placeholder {
              font-size: .14rem;
            }

            input::-moz-placeholder {
              font-size: .14rem;
            }

            input:-ms-input-placeholder {
              font-size: .14rem;
            }

          }

          .button {
            height: .32rem;
            text-align: center;

            button {
              width: .82rem;
              height: .32rem;
              background-color: var(--color-text-one-title);
              vertical-align: top;
              font-size: .16rem;
              font-weight: 500;
              color: white;
              border: 0;
              outline: none;
            }
          }
        }
      }
    }

    #submit_modals {
      .modal {
        &-dialog {
          width: 2.78rem;
          padding-top: .37rem;
          padding-bottom: .22rem;
          background-color: white;
          border-radius: .06rem;
        }

        &-top {
          text-align: center;
          height: .76rem;
          padding-bottom: .22rem;

          img {
            width: .54rem;
            height: .54rem;
            vertical-align: top;
          }
        }

        &-middle {
          padding-left: .47rem;
          padding-right: .48rem;

          .title {
            height: .3rem;
            font-size: .16rem;
            font-weight: 500;
            color: var(--color-text-one-title);
            line-height: .22rem;
            text-align: center;
            padding-bottom: .08rem;
          }

          .msg {
            text-align: center;
            height: .64rem;
            font-size: .12rem;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
            line-height: .17rem;
            padding-bottom: .3rem;
          }

          .button {
            height: .3rem;
            text-align: center;

            button {
              vertical-align: top;
              width: .72rem;
              height: .30rem;
              border: 0;
              background-color: var(--color-text-one-title);
              border-radius: .26rem;
              font-size: .16rem;
              font-weight: 500;
              color: white;
              line-height: .22rem;
              outline: none;
            }
          }
        }

      }
    }
  }
}
